<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="base" uri="http://qdbp.gitee.io/tags/base/"%>

<!DOCTYPE html>
<html>
<head>
	<%@ include file="../../_/meta.jsp"%>
	<title>个人中心 - ${pv.project.name}</title>
	<%@ include file="../../_/style.jsp"%>
	<link href="<base:url href='assets/libs/datatables/dataTables.bootstrap.css'/>" rel="stylesheet">
	<link href="<base:url href='assets/libs/bs-check/bs-check.css'/>" rel="stylesheet" type="text/css" />
	<link href="<base:url href='assets/pc/mine/personnel/my-address.css'/>" rel="stylesheet" type="text/css" />
</head>

<body>
	<%@ include file="../../_/header.jsp"%>
	<header class="breadcrumbs bg-light-grey">
		<div class="container">
			<a href="<base:url href='/' />">首页</a> &gt; <a>个人中心</a> &gt; <a>我的收货地址</a>
		</div>
	</header>
	<section class="ibody bg-light-grey pb-lg">
		<div class="container">
			<div class="row">
				<div class="col-xs-3 col-md-2 pr-clear">
					<jsp:include page="../_/menu.jsp">
					    <jsp:param name="menu" value="my-address"/>
					</jsp:include>
				</div>
				<div class="col-xs-9 col-md-10">
					<div class="main-panel bg-white plr-md ptb-sm">
						<h3 class="color-weak mt-xs mb-sm">我的收货地址</h3>
						<div class="pb-sm btn-toolbar">
							<button class="btn btn-default do-create">新增</button>
							<button class="btn btn-default do-delete">删除</button>
						</div>
						<table class="table table-bordered table-hover data-list" 
							data-table="hr:true,destroy:true,filter:true,method:'POST',
								url:'<base:url href='actions/my-address/list.json'/>',
								params:{extra:true,ordering:'sortIndex asc'}" width="100%">
							<thead>
								<tr>
									<th data-options="field:'index',render:'{index}',width:20"></th>
									<th data-options="field:'id',render:'{checkbox}',width:20"><input type="checkbox"/></th>
									<th data-options="field:'contact',render:'{template}',panel:'parent',width:170">收货人</th>
									<th data-options="field:'tagName',width:70">标签</th>
									<th data-options="field:'areaText',render:'areaText',width:150">城市</th>
									<th data-options="field:'address'">详细地址</th>
									<th data-options="field:'operate',render:'{template}',panel:'parent',width:140">操作</th>
								</tr>
							</thead>
						</table>
						<script type="contact">
							<#=this.contactName#>
							<# if (this.contactPhone) { #>
								<#=this.contactPhone#>
							<# } #>
							<# if (this.sortIndex == 0) { #>
								<i class="asterisk color-warn"></i>
							<# } #>
						</script>
						<script type="operate">
							<a class="do-update" data-id="<#=this.id#>">修改</a>
							<a class="do-delete" data-id="<#=this.id#>">删除</a>
							<# if (this.sortIndex != 0) { #>
								<a class="do-default" data-id="<#=this.id#>" data-options="message:'设置',url:'<base:url href='actions/my-address/set-default.json'/>'">设为默认</a>
							<# } #>
						</script>
					</div>
				</div>
			</div>
		</div>
	</section>
	<div class="modal fade edit" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="关闭"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title"><span class="show-in-create">新增</span><span class="show-in-update">修改</span>收货地址</h4>
				</div>
				<form class="form-horizontal vld-form ptb-md" method="POST" onsubmit="return false"
						data-create-action="<base:url href='actions/my-address/create.json'/>"
						data-update-action="<base:url href='actions/my-address/update.json'/>">
					<div class="form-group compact">
						<div class="vld-line">
							<div class="col-md-3 control-label">收货人姓名</div>
							<div class="col-md-4 control-input">
								<input type="hidden" name="id" />
								<input class="form-control" type="text" name="contactName" data-vld="{required:true}" autofocus />
								<div class="vld-tips"></div>
							</div>
						</div>
						<div class="vld-line">
							<div class="col-md-1 control-label">标签</div>
							<div class="col-md-3 control-input">
								<input class="form-control" type="text" name="tagName" placeholder="标签" />
							</div>
						</div>
					</div>
					<div class="form-group compact">
						<div class="vld-line">
							<div class="col-md-3 control-label">联系电话</div>
							<div class="col-md-4 control-input">
								<input class="form-control" type="text" name="contactPhone" data-vld="{required:true,regexp:'mobile'}" />
								<div class="vld-tips"></div>
							</div>
						</div>
						<div class="vld-line">
							<label class="col-sm-1 control-label">性别</label>
							<div class="col-sm-3">
								<div class="row compact">
									<div class="col-sm-6">
										<label class="input-group">
											<span class="input-group-addon"><input name="contactGender" type="radio" value="MALE" autocomplete="off"></span>
											<div class="form-control">男</div>
										</label>
									</div>
									<div class="col-sm-6">
										<label class="input-group">
											<span class="input-group-addon"><input name="contactGender" type="radio" value="FEMALE" autocomplete="off"></span>
											<div class="form-control">女</div>
										</label>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group compact">
						<div class="col-md-3 control-label">行政区划</div>
						<div class="col-md-8 control-input area-division-box" data-options="suggestionUrl:'<base:url href='actions/area-core/suggestion.json'/>',townshipUrl:'<base:url href='actions/area-core/township.json'/>',areaDivisionsUrl:'<base:url href='actions/area-core/area-divisions.json'/>',ipLocatingUrl:'<base:url href='actions/area-core/ip-locating.json'/>'">
							<input type="hidden" name="areaCode" />
							<input type="hidden" name="township" />
							<input class="form-control" type="text" name="areaText" data-vld="{required:true}" placeholder="选择行政区划" />
							<div class="vld-tips"></div>
							<div class="area-division-panel active hide">
								<div class="border">
									<a class="close-icon"><span class="icon fa fa-times"></span></a>
									<div class="switch-panel">
										<div class="input-box">
											<input class="form-control" type="text" name="inputText" placeholder="输入街道、乡镇、小区或商圈名称" />
										</div>
										<ul class="addresses">
										</ul>
										<a class="switch-link plain">手动选择行政区划&nbsp;&gt;&gt;</a>
									</div>
									<div class="switch-panel hide">
										<div>
											<ul class="choose-title">
												<li class="province color-warn"><a>选择省份/自治区</a></li>
												<li class="city color-warn hide"><a>选择城市/地区</a></li>
												<li class="district color-warn hide"><a>选择区/县</a></li>
											</ul>
										</div>
										<div>
											<ul class="choose-items">
											</ul>
										</div>
										<a class="switch-link plain">搜索地址快速定位&nbsp;&gt;&gt;</a>
									</div>
									<div class="hide">
										<script type="address-template">
										<# $.each(this, function() { #>
											<li data-area-code="<#=this.areaCode#>" data-location="<#=this.location#>">
												<div> <#=this.placeName#> </div>
												<div class="color-weak"> <#=this.areaText#> <#=this.address#> </div>
												<div class="resolve vertical-middle"><a class="btn btn-default btn-sm">选择</a></div>
											</li>
										<# }); #>
										</script>
										<script type="choose-item-template">
										<# $.each(this, function() { #>
											<li data-area-code="<#=this.areaCode#>"><a><#=this.shortName||this.areaName#></a></li>
										<# }); #>
										</script>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group compact">
						<div class="col-md-3 control-label">详细住址</div>
						<div class="col-md-8 control-input">
							<input class="form-control" type="text" name="address" data-vld="{required:true}" placeholder="输入道路、街道或小区名称，门牌号" />
							<div class="vld-tips"></div>
						</div>
					</div>
				</form>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-success do-submit plr-md" data-options="message:'保存'">确定</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade delete" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-xs" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="关闭"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">删除确认</h4>
				</div>
				<form class="form-horizontal vld-form ptb-md" method="POST" onsubmit="return false"
						action="<base:url href='actions/my-address/delete.json'/>">
					<div class="text-center">
						<div class="show-in-multi">确定要删除<abbr title="勾选指的是在第一列打勾，可以同时选中多行记录">勾选</abbr>的 <span class="records"></span> 条记录?</div>
						<div class="show-in-single">确定要删除该收货地址吗?</div>
						<div class="color-warn">一旦删除将无法恢复!</div>
					</div>
				</form>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-success do-submit plr-md" data-options="message:'删除'">确定</button>
				</div>
			</div>
		</div>
	</div>
	<%@ include file="../../_/footer.jsp"%>

	<%@ include file="../../_/script.jsp"%>
	<script src="<base:url href='assets/libs/zhh.validate/code/zhh.validate.js'/>" type="text/javascript"></script>
	<script src="<base:url href='assets/libs/datatables/jquery.dataTables.js'/>"></script>
	<script src="<base:url href='assets/libs/datatables/dataTables.bootstrap.min.js'/>"></script>
	<script src="<base:url href='assets/base/core/component.js'/>"></script>
	<script src="<base:url href='assets/base/core/bootstrap/plugins-init.js'/>" type="text/javascript" data-zload-ignore="true"></script>
	<script src="<base:url href='assets/pc/mine/personnel/my-address.js'/>" type="text/javascript"></script>
	<%@ include file="../../_/analysis.jsp"%>
</body>
</html>
